<template>
  <div>
    <my-head></my-head>
    <div style="background: whitesmoke;height: 100%">
      <el-row style="width:90%;margin-left: 8%;margin-top: 5%;color: whitesmoke">
        <el-card >
          <el-col  style="margin-right: 10%;height: 50px;width: 10%;color:gray;size: 20px" >
            订单信息
          </el-col>
          <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
            单价(元)
          </el-col>
          <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
            实付金额(元)
          </el-col>
          <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
            交易状态
          </el-col>
          <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
            交易操作
          </el-col><br>
          <el-divider></el-divider>

          <el-col  v-for="order in orders" :label="order" :key="order.id" >
            <el-divider content-position="left" style="color: #c0ccda">订单id：{{order.orderid}}</el-divider>
            <el-col v-for="orderDetail in order.qfOrderDetails" :label="orderDetail" :key="orderDetail.id" style="width: 60%">
              <el-col style="margin-right: 10%;width: 25%;">
                <el-row><span style="font-size: 10px;color: #c0ccda">  子订单号:{{orderDetail.orderDetailId}}</span></el-row>
                <el-row> {{orderDetail.qfCourse.courseName}}</el-row>
              </el-col>

              <el-col style="margin-right: 18%;height: 50px;width: 18%;color:gray;size: 20px">
                <el-row>
                  {{orderDetail.qfCourse.pay}}
                </el-row>
              </el-col>
              <el-col style="margin-right: 18%;height: 50px;width: 8%;color:gray;size: 20px">
                <el-row>
                  {{orderDetail.qfCourse.pay}}
                </el-row>
              </el-col>
              <br>
              <el-divider direction="vertical"></el-divider>
            </el-col>

            <el-col style="height: 50px;width: 25%;color:gray;size: 20px">

              <el-col style="margin-right: 45%;height: 50px;width: 35%;color:gray;size: 20px">
                <el-row v-if="order.orderStatus==1">
                  未支付
                </el-row>
                <el-row v-if="order.orderStatus==2">
                  已支付
                </el-row>
                <el-row v-if="order.orderStatus==3">
                  正在支付
                </el-row>
                <el-row v-if="order.orderStatus==4">
                  取消支付
                </el-row>
                <el-row v-if="order.orderStatus==5">
                  支付失败
                </el-row>
              </el-col>
              <el-col style="margin-right: -29%;height: 50px;width: 40%;color:gray;size: 20px">
                <el-row v-if="order.orderStatus==1">
                  <el-button type="warning" round @click="orderpay(order.orderid)" >立即支付</el-button>
                </el-row>
                <el-row v-if="order.orderStatus==4 || order.orderStatus==5">
                  <el-button type="warning" round @click="orderpay(order.orderid)">重新购买</el-button>
                </el-row>
                <el-row v-if="order.orderStatus==2">
                  <el-button type="success" round >支付完成</el-button>
                </el-row>
                <el-row v-if="order.orderStatus==3">
                  <el-button type="error" round @click="orderpay(order.orderid)">支付未完成</el-button>
                </el-row>
              </el-col>
            </el-col>
          </el-col>
        </el-card>
      </el-row>
    </div>

    <div v-html="alipayWap" ref="alipayWap"></div>

    <my-footer></my-footer>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "",
    data(){
      return{
        orders:[],
        alipayWap:'',
      }
    },
    methods:{
      findOrder:function () {
        this.$axios.post("/order/findOldOrderByUserId").then(res=>{
          if (res.data.code==0){
            this.orders=res.data.data;
          }
        })
      },
      orderpay(orderid){
        this.$axios.post("/pay/alipay",{orderid:orderid}).then(res=>{
          //console.log()

          this.alipayWap = res.data.data;
          console.log(res.data.data)
          //前台发起请求
          this.$nextTick(() => {
            this.$refs.alipayWap.children[0].submit()
          })
        })
      }
    },
    mounted(){
      this.findOrder();
    }

  }
</script>

<style scoped>

</style>
